<template>
  <!-- agentTypeConf -->
  <Card>
    <el-button @click="tableList.unshift({ edit: true })" icon="el-icon-plus" type="primary" size="mini">新增分类</el-button>
    <el-table v-loading="loading" :data="tableList" style="width: 100%;margin-top: 20px;">
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="代理人类别" align="center" prop="aaaa">
        <template slot-scope="scope">
          <el-select v-if="scope.row.edit" v-model="scope.row.aaaa" clearable filterable placeholder="工作类型"
            style="width: 100%;">
            <el-option v-for="item in ['A', 'B', 'C', 'D']" :key="item" :value="item" :label="item + '类'" />
          </el-select>
          <span v-else>{{ scope.row.aaaa }}类</span>
        </template>
      </el-table-column>
      <el-table-column label="继续率起始值（%）" align="center" prop="bbbb">
        <template slot-scope="scope">
          <el-input-number v-if="scope.row.edit" v-model="scope.row.bbbb" :min="1" :max="100" label="请输入" />
          <span v-else>{{ scope.row.bbbb }}</span>
        </template>
      </el-table-column>
      <el-table-column label="继续率终止值（%）" align="center" prop="cccc">
        <template slot-scope="scope">
          <el-input-number v-if="scope.row.edit" v-model="scope.row.cccc" :min="1" :max="100" label="请输入" />
          <span v-else>{{ scope.row.cccc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.edit" size="mini" type="text" @click="scope.row.edit = false">保存</el-button>
          <el-button v-else size="mini" type="text" @click="scope.row.edit = true">修改</el-button>
          <el-button size="mini" type="text" @click="tableList.splice(scope.$index, 1)" style="color: red;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </Card>
</template>
<script>
export default {
  name: 'AgentTypeConf',
  data() {
    return {
      loading: false,
      tableList: [{
        aaaa: 'A', bbbb: '12', cccc: '15', edit: false
      }, {
        aaaa: 'B', bbbb: '12', cccc: '15', edit: false
      }, {
        aaaa: 'C', bbbb: '12', cccc: '15', edit: false
      }, {
        aaaa: 'D', bbbb: '12', cccc: '15', edit: false
      },],
    }
  },
}
</script>